<template>
    <div class="water-remainder">
        <c-wrap title="账户余额">
            <c-cell></c-cell>
            <div style="background-color: white;">
                <p style="text-align: left;padding-top: 5px;">账户余额</p>
                <div style="height: 80px;line-height: 60px;">
                    <span v-if="charge" style="color: dodgerblue;font-weight: bolder;font-size: 20px;">{{charge.balance}}</span>
                    <span v-else>--</span>元
                </div>
                <mt-cell title="应缴欠费">
                    <span v-if="charge" style="color: red;font-weight: bolder">{{charge.arrearage}}</span>
                    <span v-else>--</span>元
                </mt-cell>
            </div>
            <mt-button type="primary" style="margin-top: 40px"
                       @click="$router.push({name:'waterPayment02',params:{id:$route.params.id}})">去缴费
            </mt-button>
        </c-wrap>
    </div>
</template>
<script>
    import CWrap from '../../components/CWrap'
    import CCell from '../../components/CCell'

    export default {
        components: {CWrap, CCell},
        data() {
            return {
                charge: {
                    balance: 0,
                    arrearage: 0,
                }
            }
        },
        methods: {
            loadData() {
                app.ajax.get(app.config.api.bill.recharge, {}, (res) => {
                    this.charge = res.data;
                })
            }
        },
        mounted() {
            this.loadData();
        }
    }
</script>
